<template>
	
	<view class="page coupon-detail">


		<view class="img">
			<image :src="goods.goods_img" mode="widthFix"></image>
		</view>
		<!-- 轮播图 -->
		

		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="title">
				<view class="left">
					<image src="/static/tmall_logo.png" v-if="goods.goods_type == 'tmall'" mode=""></image>
					<image src="/static/taobao_logo.png" v-if="goods.goods_type == 'taobao'"  mode=""></image>
					<image src="/static/jd_logo.png" v-if="goods.goods_type == 'jd'" mode=""></image>
					<image src="/static/pdd_logo.png" v-if="goods.goods_type == 'pdd'" mode=""></image>
					<text>{{goods.goods_title}}</text>
				</view>
				<view class="right" @tap="toItem()">
					<view class="icon">
						<image src="/static/share.png" mode=""></image>
					</view>
					<view class="tips">去比价</view>
				</view>
			</view>
			
				
			<view class="price-box">
				<view class="price">
					<block v-if="goods.goods_type == 'tmall'">天猫价</block>
					<block v-if="goods.goods_type == 'taobao'">淘宝价</block>
					<block v-if="goods.goods_type == 'jd'">京东价</block>
					<block v-if="goods.goods_type == 'pdd'">拼多多价</block>
					
					:￥{{goods.goods_price}}
				</view>
				<view class="sale-number">已售 <text>{{goods.sale_number}}</text></view>
				
			</view>
			
			<view class="coupon" v-if="goods.coupon_amount > 0" @tap="exchangeConfirm()">
				<view class="before"></view>
				<view class="left">
					<view class="coupon-title"><text>{{goods.coupon_amount}}</text>元现金券</view>
					<!-- <view class="coupon-time">使用期限：2018.12.12-2018.12.30</view> -->
				</view>
				
				<view class="right">立即领券</view>
				<view class="after"></view>
			</view>
			
			<view class="desc">
				<!-- 满减和券可一起用！【超级大BUG！！！一定要拍下2件，拍2件才85元】先拍了再说，一会没了！款式简约、大气，上身很显身材！显白！不缩水、不起球、不褪色！贴身不扎！保暖轻盈，时尚百搭，多色可选。        o -->
			</view>
		</view>
		


		<view class="footer">

			<view class="right" @tap="exchangeConfirm()" v-if="goods.coupon_amount > 0">
				<view class="no-coupon">￥<text class="">{{goods.coupon_after_price}}</text></view>
				<view class="">领券购买</view>
			</view>
			
			<view class="mid" v-else @tap="exchangeConfirm()">
				<view class="no-coupon">￥<text class="">{{goods.goods_price}}</text></view>
				<view class="">立即购买</view>
			</view>
			
			
				
			
		</view>

		<view class="copy-box" v-if="showPopup"  @tap="showPopup=false">
			<view class="copy-container" @tap.stop="showPopup=true" v-if="goods.goods_type == 'tmall' || goods.goods_type=='taobao'">
				<view class="copy-title">领券步骤</view>
				<view class="copy-info">
					<view class="goods-name">{{goods.goods_title}}</view>
					<view class="goods-price">原价：{{goods.goods_price}}</view>
					<view class="coupon-after-price">券后价：<text class="text-danger">{{goods.coupon_after_price}}</text></view>
					<view class="slae-number">销量：{{goods.sale_number}}</view>
					<view class="tips">
						复制这条信息 <text class="text-danger">{{tkl}}</text> 打开【手机淘宝】即可下单并获得奖励
					</view>
					<view class="step text-danger">
						<view class="item">一键复制</view>
						<view class="iconfont icon-you"></view>
						<view class="item">打开淘宝</view>
						<view class="iconfont icon-you"></view>
						<view class="item">下单</view>
					</view>
				</view>
				<view class="copy-btn btn-theme" @tap.stop="copy()">一键复制</view>
			</view>
			<view class="copy-container" v-if="goods.goods_type == 'jd'">
				<view class="copy-title">领券步骤</view>
				<view class="copy-info">
					<view class="jd-code uni-ellipsis">{{tkl}}</view>
					<view class="step text-danger" @tap.stop="creatQrcode()">
						<view class="item">一键复制网址</view>
						<view class="iconfont icon-you"></view>
						<view class="item">浏览器打开</view>
					</view>
				</view>
				<view class="copy-btn btn-theme" @tap.stop="copy()">一键复制</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import UniNavBar from '../../components/uni-nav-bar.vue';
	import UniIcon from '../../components/uni-icon.vue';
	import goodsList from '../../components/goods-list.vue';
	import scrollGoods from '../../components/scroll-goods.vue';
	import	banner from '../../components/banner.vue';
	import base from '../../common/base.js';
	import Request from '../../common/request.js';
	import uniPopup from '../../components/uni-popup.vue';
	import qrcode from '../../components/qrcode/qrcode.vue';
	
	
	export default {
		components: {
			UniNavBar, UniIcon, goodsList, scrollGoods,banner, qrcode
		},
		
		data() {
			return {
				goods: [],
				tkl: '',
				showPopup: false
			}
		},
		onLoad(event) {
			try {
				this.goods = JSON.parse(decodeURIComponent(event.detailDate));
			} catch (error) {
				this.goods = JSON.parse(event.detailDate);
			}
		},
		methods: {
			showBigImg(){
				var that = this;
				uni.previewImage({
					urls: [
						that.jdUrl
					]
				});
			},
			radioChange(e) {
				
				this.showSwiper = e.detail.value === "swiper";
			},
			//判断是否要提示领券购买
			exchangeConfirm: function(){
				var goods = this.goods;
				var that = this;
				if(goods.exchange_tips) {
					uni.showModal({
						title: '提示',
						content: goods.exchange_tips,
						success: function (res) {
							if (res.confirm) {
								that.exchange();
							}
						}
					});
				} else {
					that.exchange();
				}
			},
			//领券购买
			exchange: function(){
								
				var that = this;
				var params = {
					url: 'coupon/exchange',
					data: that.goods,
					sCallback: function(res) {
						// console.log(res);return;
						if(res.code == 200) {
								// console.log(res);return;
							// #ifndef MP-WEIXIN
								if(res.data.coupon_url){
									location.href = res.data.coupon_url;
								} else {
									location.href = res.data.goods_url;
								}
							// #endif
							// #ifdef MP-WEIXIN
								if(that.goods.goods_type=='pdd') {
									uni.navigateToMiniProgram({
									  appId: res.data.info.we_app_info.app_id,
									  path: res.data.info.we_app_info.page_path,
									  success(res) {
										// 打开成功
										console.log('打开拼多多小程序成功')
									  }
									})
								} else if((that.goods.goods_type == 'tmall' || that.goods.goods_type == 'taobao') && res.data.tkl){
									that.tkl = res.data.tkl;
									that.showPopup = true;
								} else {
									if(res.data.coupon_url){
										that.tkl = res.data.coupon_url;
									} else {
										that.tkl = res.data.goods_url;
									}
									that.showPopup = true;
								}
								return;
							// #endif
						}
						
						
					}
				}
				
				Request.send(params);
			},
			//比价
			toItem: function(){
				// #ifndef MP-WEIXIN
					location.href = this.goods.item_url;
				// #endif
			},
			//隐藏复制淘口令
			hidePopup(){
				this.showPopup = false;
			},
			//复制淘口令
			copy(){
				var that = this;
				uni.setClipboardData({
					data: that.tkl,
					success() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			}
		}
	}
</script>

<style>

	/* 其它样式开始 */
		view{
			display: flex;
			font-size: 26upx;
		}
		.page{
			flex-direction: column;
			background: #f5f5f5;
			padding-bottom: 100upx;
		}
		image,
		swiper,
		.img-view {
			width: 750upx;
			height: 500upx;
		}
		.page-section-title{
			margin-top: 50upx;
		}

		.detail-title{
			padding: 0 40upx;
			flex: 1;
			justify-content: center;
		}

		.detail-title .active{
			color: #FC3F78;
			border-bottom: 4upx solid #FC3F78;
		}
	/* 其它样式结束 */

	/* 商品信息开始 */
		.goods-info{
			flex-direction: column;
			padding: 25upx;
			background: #fff;
		}

		.goods-info .title{
			font-size: 28upx;		
			width: 700upx;
			color: #333;
			padding-bottom: 20upx;		
		}
		
		
		
		.goods-info .title .left{
			flex: 1;
			flex-wrap: wrap;
		}
		
		.goods-info .title .left image{
			display: flex;
			width: 50upx;
			height: 50upx;
			box-sizing: border-box;
			margin-right: 10upx;
		}
		
		.goods-info .title .left text{
			display: flex;
			flex: 1;
		}
		
		.goods-info .title .right{
			flex-direction: column;
			width: 100upx;
			text-align: center;
			border-left: 1upx solid #eee;
			color: #FA4DBE;
		}
		
		.goods-info .title .right>view, .goods-info .title .right>image{
			justify-content: center;
			font-size: 24upx;
		}
		
		.goods-info .title .right .tips{
			margin-top: 8upx;
			
		}
		
		.goods-info .title image{
			height: 30upx;
			width: 30upx;
		}

		.goods-info .sale-number text{
			
			color: #FA4DBE;

		}

		.goods-info .coupon-price{
			color: #FC4D52;
			align-items: baseline;
		}

		.goods-info .coupon-price text{
			font-size: 40upx;
		}

		.goods-info .price-box{
			color: #666;
			width: 700upx;
			justify-content: space-between;
		}

		.goods-info .coupon{
			background: linear-gradient(to left,#FA4DBE 0,#FBAA58 100%);
			width: 700upx;
			box-sizing: border-box;
			padding: 30upx 40upx;
			border-radius: 20upx;
			position: relative;
			color: #fff;
			flex-direction: row;
			height: 160upx;
			align-items: center;
			margin: 20upx 0;
		}

		.goods-info .coupon .before{
			position: absolute;
			width: 40upx;
			height: 40upx;
			background: #fff;
			border-radius: 50%;
			top:60upx;
			left: -20upx;
		}

		.goods-info .coupon .after{
			position: absolute;
			width: 40upx;
			height: 40upx;
			background: #fff;
			border-radius: 50%;
			top:60upx;
			right: -20upx;
		}

		.goods-info .coupon .left{
			flex-direction: column;
			flex:1;
			border-right: 4upx dashed #fff;
		}

		.goods-info .coupon .right{
			width: 160upx;
			font-size: 28upx;
			justify-content: center;
			align-items: center;
		}

		.goods-info .desc{
			width: 700upx;
			flex-wrap: wrap;
			color: #666;
		}
	/* 商品信息结束 */

	/* 店铺信息开始 */
		.shop-info{
			flex-direction: column;
			margin: 16upx 0;
			background: #fff;
			padding: 20upx;
		}
		.shop-info .top{
			align-items: center;
			width: 710upx;
		}

		.shop-info .top .title{
			flex: 1;
			font-size: 40upx;
			padding-left: 10upx;
			color: #333;
		}

		.shop-info .top .all-coupon{
			color: #666;
		}

		.shop-info .logo{
			width: 120upx;
		}

		.shop-info .logo image{
			width: 120upx;
			height: 120upx;
		}

		.shop-info .shop-point{
			color: #666;
			margin-top: 20upx;
			width: 710upx;
			justify-content: space-between;
		}

	/* 店铺信息结束 */
	
	/* 大家都在领开始 */
		.coupon{
			flex-direction: column;
		}

		.coupon .title{
			line-height: 80upx;
			padding: 0 20upx;
			justify-content: space-between;
			align-items: center;
			background: #fff;
		}

		.coupon .title .left text{
			height: 30upx;
			line-height: 30upx;
			padding-left: 10upx;
			border-left: 6upx solid #fc3f78;
		}

		.coupon .title .right{
			color: #aaa;
		}

		.coupon .title .right text{
			color: #fc3f78;
			padding-right: 10upx;
		}

		.coupon .coupon-goods{
			width: 100%;
			overflow: hidden;
			padding: 10upx;
			box-sizing: border-box;
		}

		.coupon .scroll-coupon {
			white-space: nowrap;
			background: #F5F5F5;
		}


		.coupon .item {
			display: inline-flex;
			text-align: center;
			flex-direction: column;
			width: 320upx;
			margin-right: 10upx;
			padding: 10upx;
			box-sizing: border-box;
			background: #fff;
		}

		.coupon .goods-img{
			position: relative;
		}

		.coupon .item image{
			width: 300upx;
			height: 300upx;
			border-radius: 10upx;
		}
		
		.coupon .coupon-info{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 300upx;
			background: linear-gradient(to left,rgba(255,113,233,.91) 0,rgba(254,92,158,.91) 100%);
			justify-content: center;
			padding: 6upx 8upx;
			border-radius: 4upx;
			color: #fff;
			box-sizing: border-box;

		}

		.coupon .goods-name{
			padding: 10upx;
			color: #333;
		}

		.coupon .goods-amount{
			color: #FC4D52;
		}

		.coupon .goods-amount .del-amount{
			color: #ccc;
			padding-left: 10upx;
		}
	/* 大家都在领结束 */

	/* 推荐商品开始 */
		.recommend{
			flex-direction: column;
		}

		.recommend .title{
			line-height: 80upx;
			padding: 0 20upx;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1upx solid #eee;
		}

		.recommend .title .left text{
			height: 30upx;
			line-height: 30upx;
			padding-left: 10upx;
			border-left: 6upx solid #fc3f78;
		}

		.recommend .title .right{
			color: #aaa;
		}

		.recommend .title .right text{
			color: #fc3f78;
			padding-right: 10upx;
		}

		.recommend .goods{
			flex-direction: column;
			background: #fff;
		}

		.recommend .item{
			border-bottom: 1upx solid #eee;
			padding: 20upx;
			
		}

		.recommend .item .goods-img{
			width: 200upx;
		}

		.recommend .item .goods-info{
			flex: 1;
			flex-direction: column;
			padding-left: 20upx;
			color: #999;
		}


		.recommend .item image{
			width: 200upx;
			height: 200upx;
		}

		.recommend .shop-amount{
			justify-content: space-between;
			padding: 20upx 0;
		}

		.recommend .coupon-info{
			justify-content: space-between;
		}

		.recommend .coupon-info .coupon-amount{
			color: #FC4D52;
			align-items: baseline;
		}

		.recommend .coupon-info .coupon-amount text{
			font-size: 40upx;
		}

		.recommend .coupon-info .coupon-price{
			background: linear-gradient(to left,#FF5E5E 0,#FF927C 100%);
			color: #fff;
			height: 30upx;
			line-height: 30upx;
			padding: 6upx 20upx;
			font-size: 20upx;
			border-radius: 6upx;
			position: relative;
		}
		.recommend .coupon-info .coupon-price .before{
			width: 20upx;
			height: 20upx;
			background: #fff;
			position: absolute;
			top: 10upx;
			left: -10upx;
			border-radius: 10upx;
		}

		.recommend .coupon-info .coupon-price .after{
			width: 20upx;
			height: 20upx;
			background: #fff;
			position: absolute;
			top: 10upx;
			right: -10upx;
			border-radius: 10upx;
		}
	/* 推荐商品结束 */

	/* 底部开始 */
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90upx;
			background: #fff;
		}

		.footer>view{
			
			justify-content: center;
			align-items: center;
		}

		.footer .left{
			flex: 1;
		}

		.footer .left view{
			flex: 1;
			justify-content: center;
			flex-direction: column;
			text-align: center;
			color: #333;
		}

		.footer .mid, .footer .right{
			flex: 2;
			flex-direction: column;
		}

		.footer .mid>view, .footer .right>view{
			justify-content: center;
		}
		.footer .mid{
			background: linear-gradient(to left,#FA4DBE 0,#FBAA58 100%);
			color: #fff;
		}

		.footer .right{
			background: linear-gradient(to left,#FA4DBE 0,#FBAA58 100%);
			color: #fff;
		}
	/* 底部结束 */


	/* 复制弹窗开始 */
		.copy-box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
			z-index: 99;
			display: flex;
			border-radius: 10upx;
		}

		.copy-box .copy-container{
			background: #fff;
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 300upx;
			width: 80%;
			left: 0;
			right: 0;
			margin: 0 auto;
		}

		.copy-box .copy-title{
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left,#EA5C45 0,#EE9D3D 100%);
			color: #fff;
		}

		.copy-box .copy-info{
			display: flex;
			flex-direction: column;
			padding: 30upx 20upx;
			color: #666;
		}

		.copy-box .jd-code{
			display: block;
			justify-content: center;
			word-wrap:break-word
		}

		.copy-box .jd-code image{
			width: 400upx;
			height: 400upx;
		}

		.copy-box .step{
			margin-top: 20upx;
			display: flex;

		}

		.copy-box .step .item{
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1upx solid #e60012;
			padding: 0 10upx;
			flex:1;
			border-radius: 8upx;
			font-size: 20upx;
		}

		.copy-box .step>view.iconfont{
			width: 40upx;
			border: none;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.copy-box .copy-btn{
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to top,#EA5C45 0,#EE9D3D 100%);
			color: #fff;
			width: 90%;
			margin: 0 auto;
			border-radius: 40upx;
			margin-bottom: 40upx;
		}

		.copy-box .tips{
			display: block;
		}
	/* 复制弹窗结束 */
	
</style>
